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ABSTRACT 



For many librarians and information specialists, the World 
Wide Web presents a challenge, not only in terms of organizing information, 
but in creating a visual package that piques the user's curiosity and 
interest as well as provides orientation to a site. Creating original 
graphics gives a Web site a unique identity, and forces the designer to think 
carefully about the layout and hierarchies of the site before creating it. 

The best way to come up with ideas is to look at other web sites, but it is 
crucial to consider the future site's audience and the library's resources 
for building and maintaining the site. This paper provides an introduction 
and overview for those who do not have formal art or design training but are 
interested in creating graphics for the Web. Topics include: determining a 
"look" for Web pages; essential software for creating graphics; Web page 
layout; and designing graphics for various platforms and Web browsers. The 
paper also describes the difference between GIF and JPEG graphics format, and 
provides tips for dealing with color for the Web. For librarians who need to 
create a Web site, creating the graphics is their opportunity to give the 
library a unique identity in a new medium. (Author/SWC) 
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Abstract 

For many librarians and information specialists, the web presents a challenge, not only in 
terms of organizing information, but in creating a visual package that piques the user's 
curiosity and interest as well as provides orientation to a site. 

This is an introduction and overview for those who do not have formal art or design 
training but are interested in creating graphics for the web. Topics to be presented are: 

* Determining a "look" for your pages 
Essential software for creating graphics 
Laying out pages for the web 

Designing graphics for various platforms and web browsers 

Handouts will be provided that list URLs and other materials referred to in the 
presentation and/or recommended as reference sources. 

Introduction 

Tired of using the same old clip art icons from the World Wide Web? Want to do 
something more than upload a scanned photo of your library? You may want to make 
your own unique graphics for your library's web site. 

This presentation will not only cover the basics of graphic design and layouts for the 
World Wide Web, but will also how to avoid the pitfalls and problems designers 
encounter when creating for this unique medium. 
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Why Design Graphics? 

How many times have you searched a library web site only to be confronted with the 
same clip art icons used on numerous other library sites? Although creating graphics can 
be time-consuming, they serve an important function: they give your site a unique 
identity. This may not seem important in a profession dedicated to providing information 
rather selling a product, but since the Web is a relatively new medium, we as librarians 
need to "sell" the library's services to generations accustomed to television and savvy 
advertising. In her article Top Ten Rules for Creating Graphics for the Web", Susan Jurist 
makes a timely point: 

...the current generation uses the Web to decide everything from what movie 
to see to what school to go to. Students will look at a university's Web page 
to decide if it would be an exciting place to spend the next four years.... They 
will stop at an arresting Web page— they won't read yards of plain text. 

(Jurist, 1996, p. 418). 

Clip art, although a time-saver, has several disadvantages. How many times has one seen 
the "Under Construction" image, or the house icon to denote a home page link? Clip art 
also creates a "hodgepodge" effect since icons are created by different artists. Clip art 
icons suffer from a variety of limitations and drawbacks: are they too small? Too ornate? 
Can you find an icon that fits library-specific needs? In essence, clip art gives a site 
amateurish and non-professional feel. 

Finally, creating original graphics forces the designer to consider the structure of the site 
more carefully. Because making graphics is more time consuming than downloading 
pre-made images, the designer must think carefully about the layout and hierarchies of 
the site before sitting down to create. 

Ideas and Graphic Layouts: Be Derivative...to a Point 

Structuring library web sites is a topic of endless discussions and seminars. There are 
several resources outlining architectural, hierarchical, and navigational tools for library 
sites; however, many are intimidated or at loss as to come up with ideas for original 
graphics and layouts. The solution? Don't! Or at least, don't feel compelled to come up 
with truly original ideas on your own. By doing some web surfing, one can conjure ideas 
for images that will enhance the look of a library web site. If you can choose what clothes 
to buy in a store, you can come up with your own ideas for images. For those of you who 
are unable even to do that, if you can discern what web sites appeal to you, you can create 
web graphics and page layouts. 

The best way to come up with ideas is to look at other web sites. There are, however, 
factors you want to keep in mind before reviewing: 

* Your Audience: are they graduate students at a large university or teenagers using 
the high school library? A scholarly look may not go over well for those who are 
doing secondary- level work. 

Your Resources: are you able to maintain a page that uses complex layouts such 
as frames? Do you want to provide alternatives to high-bandwidth pages or sites 
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using exotic layouts? Can you or your staff spare the time to learn how to make 
complex graphic effects? 

What to look for? First and foremost, look for images or layouts that strike you in some 
way, then examine why they appeal to you. Is it the color? The way it provides clear 
navigation? Think of the qualities that you find yourself drawn to and make a note of or 
print out the page or document source. 

The most obvious choice of pages to review are other library web sites. Many, especially 
the larger libraries, have eye-catching images that invite the user to explore the site. The 
logo for the libraries at the University of California at Berkeley is particularly striking, 
containing distinctive icons that clearly lead the user to important links. Lihweb at the 
Library Web Manager's Reference Site http://sunsite.berkeley.eduAVeb4Lib/faq.html has 
links to various libraries around the world as well as links to the Innovative Internet 
Applications in Libraries page . 

Do not feel bound to review library-specific sites for ideas, however. Many non-library 
sites use clear yet imaginative graphics and color combinations to provide users with 
effective navigation tools. Wired is a spectacular example of using vivid color 
combinations and imaginative graphics to lead users to various pages and services on 
their site. Another site that uses color and layout to an advantage is Lycos, a search 
engine on the web. 

If a page layout appeals to you, feel free to look at the document source code to learn how 
the page was created. Using someone else's source code is not frowned upon; many 
designers begin (and continue to learn) layouts by incorporating the HTML source codes 
of other pages. To look at a web page's source code in Netscape, simply pull down (or 
click) the View menu of a browser and highlight "Document Source"; the code will then 
appear on the screen. Another resource for web page layouts is Lynda Weinman's 
Deconstructing Web Graphics', in it Weinman t^es several distinctive web sites and 
takes them apart, explaining how certain graphics were created and how layouts were 
developed. In one site, DreamWorks Interactive, she discusses how the design team put 
together a flowchart that links the images and lower-level pages thematically. (Weinman 
1996, pp. 17-36) 

Although borrowing layouts is acceptable, borrowing non-public use images are not. That 
does not mean, however, that you cannot take an aspect of an image and incorporate it 
into your graphic. Like a drop shadow behind a particular icon? Use it! Contrasting-color 
text in a menu bar? Fine! Any idea that appeals to you should be used if you think it is 
appropriate for your site. 

Tools 

Adobe Photoshop: 

Without doubt, Adobe Systems' Photoshop 4.0 (and earlier versions) is the most versatile 
tool to use when creating graphics. Photoshop is an imaging software package for 
creating graphics as well as processing photographic images. The 4.0 version has the 
advantage of including options that are advantageous when designing web graphics, such 
as a web-compatible color palette, transparency capability, and compression formats. 
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However, there are some drawbacks of using Photoshop: ease of use and type 
manipulation. Because Photoshop is such a facile package, it can be complex to use, 
necessitating a long learning curve. It is unique in that the more one learns Photoshop, the 
more complex it becomes. Techniques such as masking or paths that can be used in a 
variety of effects are invaluable but are difficult to grasp, much less master. ForUmately 
there are a several ready-made software or plug-ins that provide filters or programs that 
automate image effects, which streamline such time-consuming effects as drop shadows 
(shadowing objects) or beveling. The more popular plug-ins for web design are Eye 
Candy from Alien Skin and Kai's Power Tools from MetaTools. For Photoshop 4.0 the 
ability to record a series of editing steps into what Adobe calls an action is now available; 
ready-made actions are available from vendors and various web sites. 

Photoshop also has limitations regarding typography; it creates fonts as a bitmapped 
image, which means the type is created as an image rather than an object. This limits the 
ability to manipulate the font, such as having the type follow a wavy path, etc. Photoshop 
type also tends to have a ragged edge unless created in an anti-aliased mode, which 
softens the pixels around the perimeter of the image, smoothing the edge. If one wants to 
create a smoother type, Adobe's Illustrator, a painting software package, is the better tool; 
however, since most web icons are small, with clarity and simplicity being favored over 
complicated designs, Photoshop is more than adequate to handle the task. 

At present there are dozens of reference books for Photoshop. If one needs to learn 
Photoshop quickly, Weinmann and Lourekas' Visual Quickstart Guide: Photoshop 3 for 
Macintosh is an excellent resource, especially as a quick reference. For a more detailed 
resource, McClelland's Macworld Photoshop 3. Bible, 2nd Edition is highly 
recommended. As of this writing, the author has not evaluated any resources for 
Photoshop 4.0. 

GraphicConverter 

GraphicConverter 2.8 is a shareware program created by Thorston Lemke. For $35 one 
can perform a surprising array functions, everything from cropping photographic images 
to creating transparent GIFs. It is also an excellent tool for manipulating color depth or 
saving images in a variety of formats, important features for creating web-friendly 
graphics. However, GraphicConverter handles type even poorly than Photoshop, creating 
type that is extraordinarily ragged and difficult to maneuver. The documentation 
accompanying the software is very limited and there are very few web sites that provide 
help, the most notable of which is the Queen's University Department of Film Studies 
web page. Editing Graphics With Graphic Converter . GraphicConverter can be 
downloaded at a variety of sites including 
http://members.aol.corn/~lemkesoft/index.html . 

Bandwidth: Avoiding the World Wide Wait 

Image file size is the eternal dilemma of web designers: how does one make a graphic 
that is attractive and clear, yet loads quickly? There are many tricks of the trade that help 
reduce image file sizes, mainly image compression and color manipulation, but the most 
important tool is understanding the issues, concepts, and limitations when dealing with 
bandwidth and the World Wide Web. 
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Growth of the World Wide Web According to the latest National Science Foundation 
statistics available, the Web has and currently undergoing explosive growth. From March 
1993 to March 1995, World Wide Web usage went from 2,933,158 megabytes to 
9,731,474 megabytes (NSF). Indications are that the growth will continue at incredible 
rate: according to Gerry McGovern of Nua Ltd. .. an internet marketing company, as of 
November 1996 there are some 25-30 million online in North America (the United States 
and Canada), and another 5-10 million online in the rest of the world. The company 
estimates approximately 200 million online by 2000 (McGovern, 1996). McGovern also 
brings up the biggest problem regarding growth, which is whether the present internet 
architecture can support current growth rates (McGovern, 1996). As we all have 
experienced with increasing frequency, the web is and will continue to carry more 
bandwidth. For an interesting and highly informative perspective regarding bandwidth 
and web images, visit the Bandwidth Conversation Society site at 
http://www.infohiway.com/way/faster . 

As a web designer, it is imperative to keep image file sizes as small as possible. In 
Designing Web Graphics, Lynda Weinman estimates that it takes approximately one 
second per kilobyte for an image to download (Weinman, 1996, p. 33). For many graphic 
artists who have moved from print media to the web, this is difficult since computer 
graphic images have often meant large file sizes. Photographs are scanned at a very high 
dpi (dots per inch) resolution to ensure a high-quality image in print; this is unnecessary 
for the web since the resolution for most computer screens is 72 dpi. Reducing scarming 
resolution alone to the maximum computer resolution should bring the size down 
considerably. 

Compression 

Most web graphics are in two file formats: JPEGs and GIFs. Each has their advantages 
and drawbacks depending upon the image type and objects of the designer. Photoshop 
and GraphicConverter support both formats, converting other formats (PICT, TIFF, or 
EPS) into the Web-friendly formats. 

JPEGs 

JPEG stands for Joint Photographic Experts Group, the group that created this format. It 
works with 24-bit color images while reducing file sizes. Developed with photographic 
images in mind, it is excellent for compressing images without sacrificing the detail 
inherent in photographs; conversely, since JPEGs use lossy compression techniques 
(meaning the image degrades slightly), it does not handle flat-colored images or other 
non-photographic images. 

Photoshop and GraphicConverter allow the user to vary the compression level of a JPEG; 
however, the more an image is compressed, the worse the image quality becomes. 
Compare these two toy duck images : the first image is a low-level JPEG compressed to 
22 kilobytes. The color tone is smooth, with a faint blotchiness in the progressive halo 
that surrounds the duck. The color in the second image, compressed to 1 3 kilobytes, is 
rougher, with patches of color instead of a continuous, smooth tone. The halo is now 
more pronounced, with each ring having a distinctly jagged edge. One should experiment 
with compression levels to determine the maximum compression level acceptable without 
noticeable degradation. 
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Another drawback is JPEGs do not support transparencies, often a necessity when 
layering images on a web site. 

Due to the fact that most computer monitors display only in 8-bit color (creating a total of 
256 colors), most JPEG images will be dithered, or reproduced whereby colors will be 
simulated by the juxtaposition of selected 8-bit colors. This creates a faint spotted pattern; 
however since photographic images often contain a multitude of colors in continuous 
tones, this is not seen as a problem as with GIF images. Dithering will be discussed in 
more detail in the Color section of this paper. 

GIFs 

GIF is the acronym for Graphics Interchange Format, an 8-bit file format that uses a 
lossless (no degradation) compression method to reduce file size. GIF images can only 
contain 256 colors (the 8-bit color range), perfect for graphic-type web images since most 
computer monitors can only distinguish 8-bit color images. 

The desired GIF format for the Web is the GIF 89a format, which supports transparency, 
or the ability to mask out a defined color. This is critical when creating images that will 
layer seamlessly on the Web. The current version of Photoshop comes with a plug-in that 
converts files to the 89a format; the plug-in is available for downloading on Adobe's web 
site at http://www.adobe.com/ . 

One can reduce file size even further with GIFs by converting the color of an image to an 
8-bit color mode. This is done easily by using a color palette designed specifically for 
web graphics (to be discussed in the Color section of this paper), or experimenting with 
the bit depth of an image. One can experiment by reducing the bit-depth to a 6-bit or even 
3-4 bit colors to see if the file size can be reduced without degrading the image. This 
capability is called "Indexed Color Mode" in Photoshop; a plug-in called PhotoGIF gives 
the user greater accuracy when indexing colors and is available from BoxTop Software . 

An easy way to convert images is via Raspberry Hill Publishing's GIF Wizard web site ; a 
user enters the URL of a web site or of an image. GIF Wizard will convert images while 
reducing it to its optimal file size; the image is then redisplayed to be saved in its new 
format. 

The Color Dilemma or ’’But It Looked Okay on the 
Mac!” 

Color is perhaps the most vexing problem a web designer can face. Factors such as 
computer monitors, system platforms, and browser software can turn a that looked vibrant 
in a graphics package on a Macintosh into a complete mess on Internet Explorer via a PC. 
This section will delineate the pitfalls and provide workarounds and solutions to the 
problems. 

Monitors 

As discussed in the previous section, most computer monitors distinguish only 8-bit 
colors, creating a color palette of 256 colors. To emulate colors not included in the 
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palette, computers will simulate or "dither" by placing a combinations of available colors 
in close proximity, thus tricking the eye into seeing non-existent colors. Unfortunately, 
this emulation creates a moiri effect, whereby dots are seen scattered throughout the 
image not unlike the dots one sees when looking at the Sunday comics in a newspaper. 
While not a overwhelming problem with photos, it can be disconcerting with flat-color 
graphics, with problems ranging from a scattering of dots to giving the image a murky 
color. 

Platforms and Browsers To complicate matters, due to the fact that they use different 
color cards and monitors, Macintosh and PCs do not share the same 256 color palette. 
What may look clear and crisp on a Macintosh may be much darker in a Windows 
environment. A good example are these two color bars . On the Macintosh, both bars are 
light yellow and khaki green. Tested on various brands of PC monitors, the colors are a 
much darker yellow and a very dark (almost black) brown. This problem necessitates the 
designer to check an image on various platforms to ensure the color stays reasonably true 
to the original intent. 

To make matters more interesting, web browsers also use their own 8-bit fixed color 
palette separate from the ones used by Macintoshes or PCs. Netscape and Internet 
Explorer will convert all graphics to its own palette regardless of what color they were 
saved in, even if the color is one shared by the two major system platforms. This means 
that Netscape, Internet Explorer, Macintoshes, and PCs share a total of 216 colors. As 
mentioned in previous sections, if a web browser comes across a color not included in the 
browser palette, it will compensate by dithering browser colors to create a simulated 
color. Using the color bars again as an example, one may see in the left bar a faint dotted 
pattern running through the colors. 

How does one determine these "safe" colors? Lynda Weinman has created a web-safe 
CLUT (color look-up table) that is available for downloading on the Web at 
http://www.lynda.com/ : it is also available on Adobe's web site . The CLUT is easily 
importable into Photoshop or GraphicConverter; it is also included in the latest editions 
of each software package. 

When dealing with color for the Web, following a few simple rules will prevent endless 
hours of frustration: 

* Always create graphics in the RGB (red-green-blue) color mode. 

Use the web-safe CLUT when creating images to be save in the GIF format. 
Because photos have color and tone subtleties and will always be displayed in a 
dithered, 8-bit format, do not try to save it using the web-safe CLUT colors and 
GIF format. Save the image as a JPEG. 

If for various reasons (file too large, etc.) a photograph needs to be converted into a 
GIF, an adaptive palette should be created whereby the graphic software chooses a 
group of colors to represent the image. This may be done in Photoshop by clicking 
on the Image menu then clicking on the Mode option, then the Indexed Color 
option. For greater accuracy and more options, the PhotoGIF plug-in by 
http://www.boxtopsoft.corn/ is an excellent application. 

Check to see how your image looks on various browsers and platforms. A green 
icon that made a striking contrast against a blue menu bar on a Macintosh may 
barely be discernible on a PC. 
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Browsers or ’’It Looked Okay on the PC!” 

Another factor designers should be aware of is the variable HTML support different 
browsers provide. Although HTML was devised as a standard, cross-platform language to 
display text and graphics on the web, companies developing browsers do not conform to 
the standards, instead developing options not recognized by the HTML standards 
committee. To see how a commercial developer uses non-standard HTML as a way of 
touting their browser, visit Microsoft's Internet Explorer 3. 0 HTMT. Enhancements page. 
Another good example are frames: used in thousands of web sites, frame tags are not 
currently supported in the HTML 3.2 Reference Specification by the World Wide Web 
Consortium. 

To complicate matters even further, the same browser may render HTML tags differently 
on different platforms. Tags that determine the same font size or table borders will render 
in different sizes; in some instances, some objects will look radically different. Here are 
examples of what the same HTML coding on the same browser version (Netscape 2.0) 
looks like on a Macintosh versus Windows '95. (ThreeToad, 1996) Notice the significant 
difference in font size and the form button. 

There several resources that discuss browser discrepancies in greater detail. Ljoida 
Weinman devotes an entire chapter, complete with examples in her book Designing Web 
Graphics. For a visual (though somewhat dated) comparison of web browsers and 
platforms, visit the ThreeToad Browser Comparison page at 
http://www.threetoad.com/main/Browser.html . 

It is virtually impossible to design a site that is compatible with all available browsers; 
however, there are ways of ensuring that the majority of users see an uncorrupted page: 

* Decide which browsers you will support in your HTML coding. A factor in your 
decision is the audience: does your campus use mostly Netscape on Macintoshes? 
On PCs? Do you also want to support text-only clients such as Lynx? Limiting 
your support to the more popular browsers seems to be the sensible solution; 
however the drawback is may be that some users using increasingly popular and 
more problematic browsers (such as AOL) will be left out. BrowserWatch on the 
web gives estimates as to what percentage of the online population uses which 
browser. 

Creating different pages for different browsers: this ensures that virtually anyone 
who visits your site will have access. However, would you be able to support 
several different versions of your site, especially if it is a large one? 

Create a compromise by using both solutions: design pages for the popular 
browsers, but create alternative text-only or lower-bandwidth pages for pages that 
may employ more exotic HTML tags such as multicolumns or frames. This is also 
^ an excellent solution to users who are impatient with slow-loading pages. 

Use the ALT tags when coding ^aphics; if a graphic does not appear on a page, the 
user will at least be able to identify the icon; this is especially important for 
graphical search buttons, links, etc. 

Conclusion 

Although making graphics for the web presents the designer with unique pitfalls and 
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obstacles, it can nevertheless be very rewarding. If you are in the position of having to 
create a web site, creating the graphics is your opportunity to give your library a unique 
identity in a new medium. Once piece of advice, however: have fun! 
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